body {
    background-image: url(../photo/美女2.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;

}

.ydm {
    margin: auto;
    width: 200px;
    position: relative;
}

.ydm div {
    width: 220px;
    height: 50px;
    border: 5px rgb(222, 138, 189) dashed;
    margin-bottom: 5px;
}

.luoli1 {
    background-color: skyblue;
}

.luoli2 {
    background-color: rgb(57, 206, 230);
}

.luoli3 {
    background-color: rgba(13, 170, 238, 0.3);
}

.luoli4 {
    background-color: #07a4b6;
}

.luoli5 {
    background-color: hsl(210, 90%, 49%);
}

.luoli6 {
    background-color: hsla(184, 84%, 50%, 0.1);
}

pre {
    font-size: 15px;
    position: absolute;
    top: -10px;
    left: -700px;
    border: 2px rgb(11, 219, 234) dashed;
}

.laobing {
    width: 400px;
    height: 330px;
    background-color: #d4f1cd;
    border: 5px solid red;
    background-image: url(../photo/星星1.png), url(../photo/星星2.png), url(../photo/星星1.png), url(../photo/星星1.png), url(../photo/星星1.png);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 5% 5%, center center, 5% 95%, 95% 5%, 95% 95%;
    margin: 150px auto;
    padding: 5px;
}

.laobing p {
    text-align: center;
    line-height: 210px;
}

.jlt {
    width: 1000px;
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

.box1 {
    width: 150px;
    height: 200px;
    margin-left: 20px;
    background-image: url(../photo/精灵图.png);
    background-position: 0px -375px;
}

.box2 {
    width: 150px;
    height: 200px;
    margin-left: 20px;
    background-image: url(../photo/精灵图.png);
    background-position: -560px -180px;
}

.box3 {
    width: 150px;
    height: 200px;
    margin-left: 20px;
    background-image: url(../photo/精灵图.png);
    background-position: -560px -180px;
}

.jianbian {
    margin-top: 400px;
    width: 1200px;
    margin: 300px auto;
    overflow: hidden;
}

.jianbian .box100 {
    float: left;
    border-radius: 10px;
    width: 200px;
    height: 200px;
    margin-left: 50px;

}

.box4 {
    background-image: linear-gradient(rgb(232, 76, 195), rgb(26, 164, 172), rgb(141, 218, 110));
}

.box5 {
    background-image: radial-gradient(at top left, rgb(143, 98, 98), rgb(131, 26, 120), rgb(223, 204, 76));
}

.box6 {
    background-image: repeating-linear-gradient(to right, rgb(201, 73, 226), rgb(229, 78, 146) 50px);
}

.box7 {
    background-image: repeating-radial-gradient(circle, rgb(94, 205, 230), rgb(82, 227, 210), rgb(234, 65, 183));
}